<template>
	<div class="header-main">
		<div class="header-search">
			<div class="left">
				<div class="inputBox"  v-if="isInput">
					<a-input  v-model:value="inputValue" :placeholder="placeholder" @pressEnter="handleSearch" allow-clear >
					 <template #suffix >
					   <svg-icon icon-class="查询,默认"  style="cursor: pointer;width: 22px;height: 22px;" class="icon" @click="handleSearch"></svg-icon>
					  </template>
					</a-input>
				</div>
				<div class="search-select">
					<div v-for="item, index in selectform" :key="index" :class="[isInput?'':'myFirst']" :style="{ minWidth:item.contWidth?item.contWidth:'' }">
						<span class="title" :style="{ minWidth:item.width }">{{item.title}}:</span>
						<a-select @change="handleChange" v-model:value="item.value" placeholder="全部" allowClear>
							<a-select-option :value="itm.value" v-for="itm, idx in item.childer" :key="idx">{{ itm.label }}</a-select-option>
						</a-select>
					</div>
				</div>
				<div class="search-date" v-if="isDate.bol">
					<span class="title">{{isDate.title}}</span>
					<a-range-picker @change="onChange" format="YYYY-MM-DD">
					 <template #suffixIcon>
							 <svg-icon icon-class="日期" style="width:24px;height:24px;top: 20%;"></svg-icon>
					 </template>
					</a-range-picker>
				</div>
			</div>
			<div class="right">
				<slot name="rightBtn"></slot>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref, watch } from 'vue';
	// import { Moment } from 'moment';
	// import store from "@/store";
	import debounce from "@/utils/debounce";
	
	// const DEPARTMENTS = store.departments();
	const SEARCHPROPS = defineProps({
		placeholder: {
			type: String,
			default: () => "搜索...",
		},
		selectform: {
			type: Object,
			default () {
				return {};
			}
		},
		isDate: {
			type: Object,
			default(){
				return { bol:false, title:'时间段' }
			}
		},
		isInput: {
			type: Boolean,
			default: () => true,
		},
	});
	const SEARCHEMIT = defineEmits(["search"]);
	
	const inputValue = ref("");
	const dateRange = ref < any > ([]);
	
	const onSearch = () => {
		const obj: any = {};
		if (JSON.stringify(SEARCHPROPS.selectform) !== "{}") {
			SEARCHPROPS.selectform.forEach((item: any) => {
				if (!obj[item.class]) {
					obj[item.class] = [];
				}
				obj[item.class] = item.value;
			});
		}
		// console.log(dateRange.value);
		SEARCHEMIT("search", inputValue.value, obj, dateRange.value);
	};
	const onSearchs = () => {
		const obj: any = {};
		if (JSON.stringify(SEARCHPROPS.selectform) !== "{}") {
			SEARCHPROPS.selectform.forEach((item: any) => {
				if (!obj[item.class]) {
					obj[item.class] = [];
				}
				obj[item.class] = item.value;
			});
		}
		// console.log(dateRange.value);
		// SEARCHEMIT("search", inputValue.value, obj, dateRange.value);
		return {op_type:obj["opear orange"],content:inputValue.value}
	};
	const handleSearch = () => {
		// console.log(111111111)
		onSearch();
	};
	
	
	const handleChange = () => {
		onSearch();
	};
	
	const onChange = (date, dateString: string[]) => {
		// console.log(dateString, "dateString");
		const arr = [dateString[0] == ''?'':dateString[0]+' 0:00', dateString[1] == ''?'':dateString[1]+' 23:59:59'];
		dateRange.value = arr;
		onSearch();
	};
	
	watch(inputValue, debounce(() => {
		onSearch();
	}), 100);
	
	defineExpose({
	  inputValue,
	  onSearchs
	});
</script>

<style lang="less" scoped>
	:deep(.ant-calendar-picker-input.ant-input>span.anticon.anticon-close-circle.ant-calendar-picker-clear){
		transform: translateX(12px) translateY(1px);
		background-color: rgba(255, 255, 255, 0);
		svg{
			color: @success700;
		}
	}
	.header-main{
		&.expand{
			.header-search{
				padding-right: 158px;
			}
		}
	}
	.header-search{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 10px;
		position: relative;
		.left,.right {
			display: flex;
		}
	}
	// :deep(span.anticon.anticon-close-circle.ant-input-clear-icon.ant-input-clear-icon-hidden){
	// 	display: none;
	// }
	// :deep(.ant-input-search) {// 搜索框
	// 	width: 240px;
	// 	height:40px;
	// 	// border: none;
	// 	// border-bottom: 1.5px solid @neutral300;
	// 	color: @neutral500;
	// 	background-color:rgba(255, 255, 255, 0);
	
	// 	&.ant-input-affix-wrapper-focused {
	// 		box-shadow: none;
	// 	}
	// 	input{
	// 		background-color: rgba(255, 255, 255, 0);
	// 		color: @success700;
	// 	}
	// 	svg{
	// 		color:@success700;
	// 	}
	// }
	// :deep(span.ant-input-affix-wrapper){
	// 	width: 240px;
	// 	height:26px;
	// 	// border: none;
	// 	// background-color: rgba(255, 255, 255, 0);
	// 	input{
	// 		background-color: rgba(255, 255, 255, 0);
	// 		font-size: 16px;
	// 	}
	// }
	// :deep(.ant-input-suffix>span>svg){
	// 	color:@success700;
	// }
	// :deep(.ant-input-affix-wrapper-focused){
	// 	box-shadow: none;
	// }
	.inputBox{
		width: 240px;
		height:40px;
		display: flex;
		align-items: center;
		// border-bottom: 1.5px solid @neutral400;
	}
	.search-date{ // 日期框
		width:270px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	// 	// border-bottom: 1.5px solid @neutral400;
		margin-left: 15px;
		padding: 0 10px;
	// 	.title{
	// 		width:25%;
	// 		font-family: SourceHanSansCN-Regular;
	// 		font-size: 16px;
	// 		color: @neutral500;
	// 	}
	// 	:deep(.ant-calendar-picker) { // 时间选择框
	// 		flex:1;
	// 		.ant-input{
	// 			padding: 0;
	// 		}
	// 		.ant-calendar-picker-input{
	// 			box-shadow: none;
	// 			// border:none;
	// 			background-color:rgba(255, 255, 255, 0);
	// 			.ant-calendar-picker-clear, .ant-calendar-picker-icon{
	// 				right:0;
	// 				top:40%;
	// 			}
	// 			input {
	// 				color:@success700;
	// 				font-family: Roboto-Bold;
	// 				font-size: 16px;
	// 			}
	// 		}
	// 		.iconfont{
	// 			color: @success700;
	// 		}
		// }
	}
	.search-select{ // 选择框
		display: flex;
		height:40px;
		>div.myFirst:nth-child(1){
			margin-left: 0;
		}
		>div{
			// min-width: 200px;
			text-align: right;
			display: flex;
			align-items: center;
			justify-content: space-around;
			// border-bottom: 1.5px solid @neutral400;
			margin-left: 15px;
			// padding: 0 10px 5px 10px;
			.title{
				// width:30%;
				// width:100px;
				font-family: SourceHanSansCN-Regular;
				font-size: 16px;
				color: @neutral500;
				margin-right: 10px;
			}
			:deep(.ant-select){
				flex:1;
				// background-color:rgba(255, 255, 255, 0);
			// 	border:none;
				text-align: right;
				// .ant-select-selection-item{
				// 	font-family: SourceHanSansCN-Bold;
				// 	font-size: 16px;
				// 	font-weight: bold;
				// 	width: 100%;
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: flex-end;
				// }
			// 	.ant-select-selector{
			// 		display: flex;
			// 		align-items: center;
			// 		.ant-select-selection-placeholder{
			// 			font-family: SourceHanSansCN-Bold;
			// 			font-size: 16px;
			// 			font-weight: bold;
			// 		}
			// 	}
			// 	.ant-select-selection-item, .ant-select-arrow, {
			// 		color:@success700;
			// 	}
			// 	.ant-select-selector{
			// 		.ant-select-selection-placeholder{
			// 			color:@success700;
			// 		}
			// 	}
			// 	.ant-select-selector{
			// 		background-color:rgba(255, 255, 255, 0);
			// 		border:none;
			// 	}
			// 	&.ant-select-focused{
			// 		.ant-select-selector{
			// 			border:none;
			// 			box-shadow:none;
			// 		}
			// 	}
			}
		}
	}

</style>
